<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            :title="!dataForm.id ? '添加' : '修改'"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="750"
    >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 10px">
    <el-form-item label="用户名" >
      <el-input v-model="dataForm.username" placeholder="请输入用户名" size="small"></el-input>
    </el-form-item>
    <el-form-item label="密码" >
      <el-input v-model="dataForm.password" placeholder="请输入密码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="用户头像" >
      <el-input v-model="dataForm.avatar" placeholder="请输入用户头像" size="small"></el-input>
    </el-form-item>
    <el-form-item label="背景图片" >
      <el-input v-model="dataForm.bgimg" placeholder="请输入背景图片" size="small"></el-input>
    </el-form-item>
    <el-form-item label="性别" >
      <el-input v-model="dataForm.sex" placeholder="请输入性别" size="small"></el-input>
    </el-form-item>
    <el-form-item label="生日" >
      <el-input v-model="dataForm.birthday" placeholder="请输入生日" size="small"></el-input>
    </el-form-item>
    <el-form-item label="手机号" >
      <el-input v-model="dataForm.phone" placeholder="请输入手机号" size="small"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" >
      <el-input v-model="dataForm.email" placeholder="请输入邮箱" size="small"></el-input>
    </el-form-item>
    <el-form-item label="省" >
      <el-input v-model="dataForm.province" placeholder="请输入省" size="small"></el-input>
    </el-form-item>
    <el-form-item label="市" >
      <el-input v-model="dataForm.city" placeholder="请输入市" size="small"></el-input>
    </el-form-item>
    <el-form-item label="区" >
      <el-input v-model="dataForm.region" placeholder="请输入区" size="small"></el-input>
    </el-form-item>
    <el-form-item label="等级" >
      <el-input v-model="dataForm.level" placeholder="请输入等级" size="small"></el-input>
    </el-form-item>
    <el-form-item label="签名" >
      <el-input v-model="dataForm.note" placeholder="请输入签名" size="small"></el-input>
    </el-form-item>
    <el-form-item label="标签" >
      <el-input v-model="dataForm.tag" placeholder="请输入标签" size="small"></el-input>
    </el-form-item>
    <el-form-item label="锁定状态" >
      <el-input v-model="dataForm.lockstatus" placeholder="请输入锁定状态" size="small"></el-input>
    </el-form-item>
    <el-form-item label="类型" >
      <el-input v-model="dataForm.type" placeholder="请输入类型" size="small"></el-input>
    </el-form-item>
    <el-form-item label="状态" >
      <el-input v-model="dataForm.status" placeholder="请输入状态" size="small"></el-input>
    </el-form-item>
    <el-form-item label="认证状态" >
      <el-input v-model="dataForm.authstatus" placeholder="请输入认证状态" size="small"></el-input>
    </el-form-item>
    <el-form-item label="管理员ID" >
      <el-input v-model="dataForm.adminid" placeholder="请输入管理员ID" size="small"></el-input>
    </el-form-item>
    <el-form-item label="创建时间" >
      <el-input v-model="dataForm.createtime" placeholder="请输入创建时间" size="small"></el-input>
    </el-form-item>
    <el-form-item label="更新时间" >
      <el-input v-model="dataForm.updatetime" placeholder="请输入更新时间" size="small"></el-input>
    </el-form-item>
    <el-form-item label="邀请码" >
      <el-input v-model="dataForm.owenerinvitecode" placeholder="请输入邀请码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="上级邀请码" >
      <el-input v-model="dataForm.invitecode" placeholder="请输入上级邀请码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="金币" >
      <el-input v-model="dataForm.coin" placeholder="请输入金币" size="small"></el-input>
    </el-form-item>
    <el-form-item label="钱包" >
      <el-input v-model="dataForm.amount" placeholder="请输入钱包" size="small"></el-input>
    </el-form-item>
    <el-form-item label="积分" >
      <el-input v-model="dataForm.point" placeholder="请输入积分" size="small"></el-input>
    </el-form-item>
    <el-form-item label="微信openid" >
      <el-input v-model="dataForm.openid" placeholder="请输入微信openid" size="small"></el-input>
    </el-form-item>
    <el-form-item label="微信小程序ID" >
      <el-input v-model="dataForm.wxappid" placeholder="请输入微信小程序ID" size="small"></el-input>
    </el-form-item>
    <el-form-item label="vip状态" >
      <el-input v-model="dataForm.vipstatus" placeholder="请输入vip状态" size="small"></el-input>
    </el-form-item>
    <el-form-item label="Vip结束时间" >
      <el-input v-model="dataForm.vipendtime" placeholder="请输入Vip结束时间" size="small"></el-input>
    </el-form-item>
    <el-form-item label="在线状态" >
      <el-input v-model="dataForm.onlinestatus" placeholder="请输入在线状态" size="small"></el-input>
    </el-form-item>
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    export default {
    components: {
    },
    data () {
      return {
        visible: false,
        selOptions: {},
        loading:false,
        dataForm: {
          id: 0,
          username: '' ,
          password: '' ,
          avatar: '' ,
          bgimg: '' ,
          sex: '' ,
          birthday: '' ,
          phone: '' ,
          email: '' ,
          province: '' ,
          city: '' ,
          region: '' ,
          level: '' ,
          note: '' ,
          tag: '' ,
          lockstatus: '' ,
          type: '' ,
          status: '' ,
          authstatus: '' ,
          adminid: '' ,
          createtime: '' ,
          updatetime: '' ,
          owenerinvitecode: '' ,
          invitecode: '' ,
          coin: '' ,
          amount: '' ,
          point: '' ,
          openid: '' ,
          wxappid: '' ,
          vipstatus: '' ,
          vipendtime: '' ,
          onlinestatus: ''
        },
        dataRule: {
          username: [
            { required: true, message: '用户名  为必填项', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码  为必填项', trigger: 'blur' }
          ],
          avatar: [
            { required: true, message: '用户头像  为必填项', trigger: 'blur' }
          ],
          bgimg: [
            { required: true, message: '背景图片  为必填项', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '性别  为必填项', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '生日  为必填项', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '手机号  为必填项', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱  为必填项', trigger: 'blur' }
          ],
          province: [
            { required: true, message: '省  为必填项', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '市  为必填项', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '区  为必填项', trigger: 'blur' }
          ],
          level: [
            { required: true, message: '等级  为必填项', trigger: 'blur' }
          ],
          note: [
            { required: true, message: '签名  为必填项', trigger: 'blur' }
          ],
          tag: [
            { required: true, message: '标签  为必填项', trigger: 'blur' }
          ],
          lockstatus: [
            { required: true, message: '锁定状态  为必填项', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型  为必填项', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '状态  为必填项', trigger: 'blur' }
          ],
          authstatus: [
            { required: true, message: '认证状态  为必填项', trigger: 'blur' }
          ],
          adminid: [
            { required: true, message: '管理员ID  为必填项', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          updatetime: [
            { required: true, message: '更新时间  为必填项', trigger: 'blur' }
          ],
          owenerinvitecode: [
            { required: true, message: '邀请码  为必填项', trigger: 'blur' }
          ],
          invitecode: [
            { required: true, message: '上级邀请码  为必填项', trigger: 'blur' }
          ],
          coin: [
            { required: true, message: '金币  为必填项', trigger: 'blur' }
          ],
          amount: [
            { required: true, message: '钱包  为必填项', trigger: 'blur' }
          ],
          point: [
            { required: true, message: '积分  为必填项', trigger: 'blur' }
          ],
          openid: [
            { required: true, message: '微信openid  为必填项', trigger: 'blur' }
          ],
          wxappid: [
            { required: true, message: '微信小程序ID  为必填项', trigger: 'blur' }
          ],
          vipstatus: [
            { required: true, message: 'vip状态  为必填项', trigger: 'blur' }
          ],
          vipendtime: [
            { required: true, message: 'Vip结束时间  为必填项', trigger: 'blur' }
          ],
          onlinestatus: [
            { required: true, message: '在线状态  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || undefined
        this.visible = true
        this.selOptions=this.$constants.selOptions;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id){
              this.loading = true
                api.post('rest/vabc/loginuser/info',{id:this.dataForm.id}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.id){
                postData.id==undefined
                api.post('rest/vabc/loginuser/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/loginuser/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    }
    }
  }
</script>
